<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>learn visor.js</title>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="./js/visor.core.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/visor.widgets.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<h4 style="margin: 10px;">运行结果</h4>
	<p style="margin-top: 20px;">tips: 双击控件可修改text值</p>
	<!-- 一定要加position:relative; -->
	<div id="panel" style="position: relative;"></div>
</body>
<script type="text/javascript">
	var panel = $.presenter({
		width: 450,
		height: 600,
		dom: $("#panel"),
		background: {
			filltype: "color",
			color: "#eee"
		}
	});

	var control1 = $.widgets("widget", {
		x: 20,
	    y: 50,
	    width: 50,
	    height: 60,
	    text: "editable:true",
	    scaleX: 1.5,
	    scaleY: 2,
	    editable: true,
	    background: {
	        filltype:"color",
	        color:"yellow"
	    },
	    border: {
	    	width: 2,
	    	type: "dotted",
	    	color: "blue"
	    },
	    font: {
	    	style: "italic", //normal,italic斜体
	    	weight: "bold", //normal,bold
	    	family: "Arial",
	    	size: "20pt", //pt单位？
	    	color: "blue",
	    	fill: true //？
	    }
	}).appendPresenter(panel);

	$.widgets("widget", {
		x: 20,
	    y: 220,
	    width: 150,
	    height: 100,
	    text: "gradient: liner",
	    editable: true,
	    background: {
	        filltype:"gradient",
	        color:"#fff"
	    },
	    gradient: {
	    	type: "liner",
	    	begincolor: "#92cff5",
	    	endcolor: "pink",
	    	angle: 45
	    },
	    corner: {
	    	type: "round",
	    	radius: 20
	    },
	    shadow: {
	    	color: "#000",
	    	offsetX: 4,
	    	offsetY: 4,
	    	blur: 20
	    }
	}).appendPresenter(panel);

	$.widgets("widget", {
		x: 220,
	    y: 220,
	    width: 200,
	    height: 100,
	    text: "gradient: radial",
	    editable: true,
	    background: {
	        filltype:"gradient",
	        color:"#fff"
	    },
	    gradient: {
	    	type: "radial",
	    	begincolor: "pink",
	    	endcolor: "#92cff5",
	    	radius: 30
	    }
	}).appendPresenter(panel);

	var control2 = $.widgets("widget", {
		x: 20,
	    y: 400,
	    width: 100,
	    height: 80,
	    alpha: 0.5,
	    visible: true,
	    text: "editable:false rotate:30 alpha:0.5",
	    margin: 30, //文字距离边框的距离
	    rotate: 30,
	    editable: false,
	    background: {
	        filltype:"color",
	        color:"yellow"
	    }
	}).appendPresenter(panel);

	panel.paint();
</script>
</html>